• ;
  • A Coding Boy
  • Blog
  • Videos
  • Projects
  • Home
HTML AND CSS
LOGIN PAGE
WEBSITE DESGIN
API PROJECTS
CARD DESGIN
JAVASCRIPTS GAMES
JAVASCRIPT PROJECTS
JAVA PROJECTS
PYTHON PROJECTS
demo post
only for demo nasa prospect
only for demo the gonnies
most popular
how to create parallax website
how to create a beautiful card
how to create a netflix login page
how to create flipping ui card
how to create image generator website
Build A Language Translator App in HTML CSS & JavaScript
Language translator is a program that is used to translate text into multiple languages like Nepali, Hindi, Spanish, etc. In my language translator app, users can easily translate text into different languages, copy translated text, and convert text to speech. It is similar to Google Translate.
Language Translator App in JavaScript [Source Codes]
First, paste the following codes into your index.html file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Language Translator | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Font Awesome CDN Link for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="text-input">
<textarea spellcheck="false" class="from-text" placeholder="Enter text"></textarea>
<textarea spellcheck="false" readonly disabled class="to-text" placeholder="Translation"></textarea>
</div>
<ul class="controls">
<li class="row from">
<div class="icons">
<i id="from" class="fas fa-volume-up"></i>
<i id="from" class="fas fa-copy"></i>
</div>
<select></select>
</li>
<li class="exchange"><i class="fas fa-exchange-alt"></i></li>
<li class="row to">
<select></select>
<div class="icons">
<i id="to" class="fas fa-volume-up"></i>
<i id="to" class="fas fa-copy"></i>
</div>
</li>
</ul>
</div>
<button>Translate Text</button>
</div>
<script src="js/countries.js"></script>
<script src="js/script.js"></script>
</body>
</html>
<!DOCTYPE html> <!-- Coding By CodingNepal - youtube.com/codingnepal --> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Language Translator | CodingNepal</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Font Awesome CDN Link for Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> </head> <body> <div class="container"> <div class="wrapper"> <div class="text-input"> <textarea spellcheck="false" class="from-text" placeholder="Enter text"></textarea> <textarea spellcheck="false" readonly disabled class="to-text" placeholder="Translation"></textarea> </div> <ul class="controls"> <li class="row from"> <div class="icons"> <i id="from" class="fas fa-volume-up"></i> <i id="from" class="fas fa-copy"></i> </div> <select></select> </li> <li class="exchange"><i class="fas fa-exchange-alt"></i></li> <li class="row to"> <select></select> <div class="icons"> <i id="to" class="fas fa-volume-up"></i> <i id="to" class="fas fa-copy"></i> </div> </li> </ul> </div> <button>Translate Text</button> </div> <script src="js/countries.js"></script> <script src="js/script.js"></script> </body> </html>
Second, paste the following codes into your style.css file
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
min-height: 100vh;
background: #5372F0;
}
.container{
max-width: 690px;
width: 100%;
padding: 30px;
background: #fff;
border-radius: 7px;
box-shadow: 0 10px 20px rgba(0,0,0,0.01);
}
.wrapper{
border-radius: 5px;
border: 1px solid #ccc;
}
.wrapper .text-input{
display: flex;
border-bottom: 1px solid #ccc;
}
.text-input .to-text{
border-radius: 0px;
border-left: 1px solid #ccc;
}
.text-input textarea{
height: 250px;
width: 100%;
border: none;
outline: none;
resize: none;
background: none;
font-size: 18px;
padding: 10px 15px;
border-radius: 5px;
}
.text-input textarea::placeholder{
color: #b7b6b6;
}
.controls, li, .icons, .icons i{
display: flex;
align-items: center;
justify-content: space-between;
}
.controls{
list-style: none;
padding: 12px 15px;
}
.controls .row .icons{
width: 38%;
}
.controls .row .icons i{
width: 50px;
color: #adadad;
font-size: 14px;
cursor: pointer;
transition: transform 0.2s ease;
justify-content: center;
}
.controls .row.from .icons{
padding-right: 15px;
border-right: 1px solid #ccc;
}
.controls .row.to .icons{
padding-left: 15px;
border-left: 1px solid #ccc;
}
.controls .row select{
color: #333;
border: none;
outline: none;
font-size: 18px;
background: none;
padding-left: 5px;
}
.text-input textarea::-webkit-scrollbar{
width: 4px;
}
.controls .row select::-webkit-scrollbar{
width: 8px;
}
.text-input textarea::-webkit-scrollbar-track,
.controls .row select::-webkit-scrollbar-track{
background: #fff;
}
.text-input textarea::-webkit-scrollbar-thumb{
background: #ddd;
border-radius: 8px;
}
.controls .row select::-webkit-scrollbar-thumb{
background: #999;
border-radius: 8px;
border-right: 2px solid #ffffff;
}
.controls .exchange{
color: #adadad;
cursor: pointer;
font-size: 16px;
transition: transform 0.2s ease;
}
.controls i:active{
transform: scale(0.9);
}
.container button{
width: 100%;
padding: 14px;
outline: none;
border: none;
color: #fff;
cursor: pointer;
margin-top: 20px;
font-size: 17px;
border-radius: 5px;
background: #5372F0;
}
@media (max-width: 660px){
.container{
padding: 20px;
}
.wrapper .text-input{
flex-direction: column;
}
.text-input .to-text{
border-left: 0px;
border-top: 1px solid #ccc;
}
.text-input textarea{
height: 200px;
}
.controls .row .icons{
display: none;
}
.container button{
padding: 13px;
font-size: 16px;
}
.controls .row select{
font-size: 16px;
}
.controls .exchange{
font-size: 14px;
}
}
/* Import Google Font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ display: flex; align-items: center; justify-content: center; padding: 0 10px; min-height: 100vh; background: #5372F0; } .container{ max-width: 690px; width: 100%; padding: 30px; background: #fff; border-radius: 7px; box-shadow: 0 10px 20px rgba(0,0,0,0.01); } .wrapper{ border-radius: 5px; border: 1px solid #ccc; } .wrapper .text-input{ display: flex; border-bottom: 1px solid #ccc; } .text-input .to-text{ border-radius: 0px; border-left: 1px solid #ccc; } .text-input textarea{ height: 250px; width: 100%; border: none; outline: none; resize: none; background: none; font-size: 18px; padding: 10px 15px; border-radius: 5px; } .text-input textarea::placeholder{ color: #b7b6b6; } .controls, li, .icons, .icons i{ display: flex; align-items: center; justify-content: space-between; } .controls{ list-style: none; padding: 12px 15px; } .controls .row .icons{ width: 38%; } .controls .row .icons i{ width: 50px; color: #adadad; font-size: 14px; cursor: pointer; transition: transform 0.2s ease; justify-content: center; } .controls .row.from .icons{ padding-right: 15px; border-right: 1px solid #ccc; } .controls .row.to .icons{ padding-left: 15px; border-left: 1px solid #ccc; } .controls .row select{ color: #333; border: none; outline: none; font-size: 18px; background: none; padding-left: 5px; } .text-input textarea::-webkit-scrollbar{ width: 4px; } .controls .row select::-webkit-scrollbar{ width: 8px; } .text-input textarea::-webkit-scrollbar-track, .controls .row select::-webkit-scrollbar-track{ background: #fff; } .text-input textarea::-webkit-scrollbar-thumb{ background: #ddd; border-radius: 8px; } .controls .row select::-webkit-scrollbar-thumb{ background: #999; border-radius: 8px; border-right: 2px solid #ffffff; } .controls .exchange{ color: #adadad; cursor: pointer; font-size: 16px; transition: transform 0.2s ease; } .controls i:active{ transform: scale(0.9); } .container button{ width: 100%; padding: 14px; outline: none; border: none; color: #fff; cursor: pointer; margin-top: 20px; font-size: 17px; border-radius: 5px; background: #5372F0; } @media (max-width: 660px){ .container{ padding: 20px; } .wrapper .text-input{ flex-direction: column; } .text-input .to-text{ border-left: 0px; border-top: 1px solid #ccc; } .text-input textarea{ height: 200px; } .controls .row .icons{ display: none; } .container button{ padding: 13px; font-size: 16px; } .controls .row select{ font-size: 16px; } .controls .exchange{ font-size: 14px; } }
Last, paste the following codes into your script.js file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
const countries = {
"am-ET": "Amharic",
"ar-SA": "Arabic",
"be-BY": "Bielarus",
"bem-ZM": "Bemba",
"bi-VU": "Bislama",
"bjs-BB": "Bajan",
"bn-IN": "Bengali",
"bo-CN": "Tibetan",
"br-FR": "Breton",
"bs-BA": "Bosnian",
"ca-ES": "Catalan",
"cop-EG": "Coptic",
"cs-CZ": "Czech",
"cy-GB": "Welsh",
"da-DK": "Danish",
"dz-BT": "Dzongkha",
"de-DE": "German",
"dv-MV": "Maldivian",
"el-GR": "Greek",
"en-GB": "English",
"es-ES": "Spanish",
"et-EE": "Estonian",
"eu-ES": "Basque",
"fa-IR": "Persian",
"fi-FI": "Finnish",
"fn-FNG": "Fanagalo",
"fo-FO": "Faroese",
"fr-FR": "French",
"gl-ES": "Galician",
"gu-IN": "Gujarati",
"ha-NE": "Hausa",
"he-IL": "Hebrew",
"hi-IN": "Hindi",
"hr-HR": "Croatian",
"hu-HU": "Hungarian",
"id-ID": "Indonesian",
"is-IS": "Icelandic",
"it-IT": "Italian",
"ja-JP": "Japanese",
"kk-KZ": "Kazakh",
"km-KM": "Khmer",
"kn-IN": "Kannada",
"ko-KR": "Korean",
"ku-TR": "Kurdish",
"ky-KG": "Kyrgyz",
"la-VA": "Latin",
"lo-LA": "Lao",
"lv-LV": "Latvian",
"men-SL": "Mende",
"mg-MG": "Malagasy",
"mi-NZ": "Maori",
"ms-MY": "Malay",
"mt-MT": "Maltese",
"my-MM": "Burmese",
"ne-NP": "Nepali",
"niu-NU": "Niuean",
"nl-NL": "Dutch",
"no-NO": "Norwegian",
"ny-MW": "Nyanja",
"ur-PK": "Pakistani",
"pau-PW": "Palauan",
"pa-IN": "Panjabi",
"ps-PK": "Pashto",
"pis-SB": "Pijin",
"pl-PL": "Polish",
"pt-PT": "Portuguese",
"rn-BI": "Kirundi",
"ro-RO": "Romanian",
"ru-RU": "Russian",
"sg-CF": "Sango",
"si-LK": "Sinhala",
"sk-SK": "Slovak",
"sm-WS": "Samoan",
"sn-ZW": "Shona",
"so-SO": "Somali",
"sq-AL": "Albanian",
"sr-RS": "Serbian",
"sv-SE": "Swedish",
"sw-SZ": "Swahili",
"ta-LK": "Tamil",
"te-IN": "Telugu",
"tet-TL": "Tetum",
"tg-TJ": "Tajik",
"th-TH": "Thai",
"ti-TI": "Tigrinya",
"tk-TM": "Turkmen",
"tl-PH": "Tagalog",
"tn-BW": "Tswana",
"to-TO": "Tongan",
"tr-TR": "Turkish",
"uk-UA": "Ukrainian",
"uz-UZ": "Uzbek",
"vi-VN": "Vietnamese",
"wo-SN": "Wolof",
"xh-ZA": "Xhosa",
"yi-YD": "Yiddish",
"zu-ZA": "Zulu"
}
const countries = { "am-ET": "Amharic", "ar-SA": "Arabic", "be-BY": "Bielarus", "bem-ZM": "Bemba", "bi-VU": "Bislama", "bjs-BB": "Bajan", "bn-IN": "Bengali", "bo-CN": "Tibetan", "br-FR": "Breton", "bs-BA": "Bosnian", "ca-ES": "Catalan", "cop-EG": "Coptic", "cs-CZ": "Czech", "cy-GB": "Welsh", "da-DK": "Danish", "dz-BT": "Dzongkha", "de-DE": "German", "dv-MV": "Maldivian", "el-GR": "Greek", "en-GB": "English", "es-ES": "Spanish", "et-EE": "Estonian", "eu-ES": "Basque", "fa-IR": "Persian", "fi-FI": "Finnish", "fn-FNG": "Fanagalo", "fo-FO": "Faroese", "fr-FR": "French", "gl-ES": "Galician", "gu-IN": "Gujarati", "ha-NE": "Hausa", "he-IL": "Hebrew", "hi-IN": "Hindi", "hr-HR": "Croatian", "hu-HU": "Hungarian", "id-ID": "Indonesian", "is-IS": "Icelandic", "it-IT": "Italian", "ja-JP": "Japanese", "kk-KZ": "Kazakh", "km-KM": "Khmer", "kn-IN": "Kannada", "ko-KR": "Korean", "ku-TR": "Kurdish", "ky-KG": "Kyrgyz", "la-VA": "Latin", "lo-LA": "Lao", "lv-LV": "Latvian", "men-SL": "Mende", "mg-MG": "Malagasy", "mi-NZ": "Maori", "ms-MY": "Malay", "mt-MT": "Maltese", "my-MM": "Burmese", "ne-NP": "Nepali", "niu-NU": "Niuean", "nl-NL": "Dutch", "no-NO": "Norwegian", "ny-MW": "Nyanja", "ur-PK": "Pakistani", "pau-PW": "Palauan", "pa-IN": "Panjabi", "ps-PK": "Pashto", "pis-SB": "Pijin", "pl-PL": "Polish", "pt-PT": "Portuguese", "rn-BI": "Kirundi", "ro-RO": "Romanian", "ru-RU": "Russian", "sg-CF": "Sango", "si-LK": "Sinhala", "sk-SK": "Slovak", "sm-WS": "Samoan", "sn-ZW": "Shona", "so-SO": "Somali", "sq-AL": "Albanian", "sr-RS": "Serbian", "sv-SE": "Swedish", "sw-SZ": "Swahili", "ta-LK": "Tamil", "te-IN": "Telugu", "tet-TL": "Tetum", "tg-TJ": "Tajik", "th-TH": "Thai", "ti-TI": "Tigrinya", "tk-TM": "Turkmen", "tl-PH": "Tagalog", "tn-BW": "Tswana", "to-TO": "Tongan", "tr-TR": "Turkish", "uk-UA": "Ukrainian", "uz-UZ": "Uzbek", "vi-VN": "Vietnamese", "wo-SN": "Wolof", "xh-ZA": "Xhosa", "yi-YD": "Yiddish", "zu-ZA": "Zulu" }
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
const fromText = document.querySelector(".from-text"),
toText = document.querySelector(".to-text"),
exchageIcon = document.querySelector(".exchange"),
selectTag = document.querySelectorAll("select"),
icons = document.querySelectorAll(".row i");
translateBtn = document.querySelector("button"),
selectTag.forEach((tag, id) => {
for (let country_code in countries) {
let selected = id == 0 ? country_code == "en-GB" ? "selected" : "" : country_code == "hi-IN" ? "selected" : "";
let option = `<option ${selected} value="${country_code}">${countries[country_code]}</option>`;
tag.insertAdjacentHTML("beforeend", option);
}
});
exchageIcon.addEventListener("click", () => {
let tempText = fromText.value,
tempLang = selectTag[0].value;
fromText.value = toText.value;
toText.value = tempText;
selectTag[0].value = selectTag[1].value;
selectTag[1].value = tempLang;
});
fromText.addEventListener("keyup", () => {
if(!fromText.value) {
toText.value = "";
}
});
translateBtn.addEventListener("click", () => {
let text = fromText.value.trim(),
translateFrom = selectTag[0].value,
translateTo = selectTag[1].value;
if(!text) return;
toText.setAttribute("placeholder", "Translating...");
let apiUrl = `https://api.mymemory.translated.net/get?q=${text}&langpair=${translateFrom}|${translateTo}`;
fetch(apiUrl).then(res => res.json()).then(data => {
toText.value = data.responseData.translatedText;
data.matches.forEach(data => {
if(data.id === 0) {
toText.value = data.translation;
}
});
toText.setAttribute("placeholder", "Translation");
});
});
icons.forEach(icon => {
icon.addEventListener("click", ({target}) => {
if(!fromText.value || !toText.value) return;
if(target.classList.contains("fa-copy")) {
if(target.id == "from") {
navigator.clipboard.writeText(fromText.value);
} else {
navigator.clipboard.writeText(toText.value);
}
} else {
let utterance;
if(target.id == "from") {
utterance = new SpeechSynthesisUtterance(fromText.value);
utterance.lang = selectTag[0].value;
} else {
utterance = new SpeechSynthesisUtterance(toText.value);
utterance.lang = selectTag[1].value;
}
speechSynthesis.speak(utterance);
}
});
});
const fromText = document.querySelector(".from-text"), toText = document.querySelector(".to-text"), exchageIcon = document.querySelector(".exchange"), selectTag = document.querySelectorAll("select"), icons = document.querySelectorAll(".row i"); translateBtn = document.querySelector("button"), selectTag.forEach((tag, id) => { for (let country_code in countries) { let selected = id == 0 ? country_code == "en-GB" ? "selected" : "" : country_code == "hi-IN" ? "selected" : ""; let option = `<option ${selected} value="${country_code}">${countries[country_code]}</option>`; tag.insertAdjacentHTML("beforeend", option); } }); exchageIcon.addEventListener("click", () => { let tempText = fromText.value, tempLang = selectTag[0].value; fromText.value = toText.value; toText.value = tempText; selectTag[0].value = selectTag[1].value; selectTag[1].value = tempLang; }); fromText.addEventListener("keyup", () => { if(!fromText.value) { toText.value = ""; } }); translateBtn.addEventListener("click", () => { let text = fromText.value.trim(), translateFrom = selectTag[0].value, translateTo = selectTag[1].value; if(!text) return; toText.setAttribute("placeholder", "Translating..."); let apiUrl = `https://api.mymemory.translated.net/get?q=${text}&langpair=${translateFrom}|${translateTo}`; fetch(apiUrl).then(res => res.json()).then(data => { toText.value = data.responseData.translatedText; data.matches.forEach(data => { if(data.id === 0) { toText.value = data.translation; } }); toText.setAttribute("placeholder", "Translation"); }); }); icons.forEach(icon => { icon.addEventListener("click", ({target}) => { if(!fromText.value || !toText.value) return; if(target.classList.contains("fa-copy")) { if(target.id == "from") { navigator.clipboard.writeText(fromText.value); } else { navigator.clipboard.writeText(toText.value); } } else { let utterance; if(target.id == "from") { utterance = new SpeechSynthesisUtterance(fromText.value); utterance.lang = selectTag[0].value; } else { utterance = new SpeechSynthesisUtterance(toText.value); utterance.lang = selectTag[1].value; } speechSynthesis.speak(utterance); } }); });
That’s all, now you’ve successfully built a Language Translator in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it. do not write one word it not answer correct
live demo
Download files
Info
Home
Projects
Blogs
Videos
About us
Follow us for more!
© 2023 All Rights Reserved A Coding Boy

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Login Form | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <form action="#"> <h2>Login</h2> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Enter your password</label> </div> <div class="forget"> <label for="remember"> <input type="checkbox" id="remember"> <p>Remember me</p> </label> <a href="#">Forgot password?</a> </div> <button type="submit">Log In</button> <div class="register"> <p>Don't have an account? <a href="#">Register</a></p> </div> </form> </div> </body> </html>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000; background-position: center; background-size: cover; } .wrapper { width: 400px; border-radius: 8px; padding: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } form { display: flex; flex-direction: column; } h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; } .input-field { position: relative; border-bottom: 2px solid #ccc; margin: 15px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #fff; font-size: 16px; pointer-events: none; transition: 0.15s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #fff; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.8rem; top: 10px; transform: translateY(-120%); } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #fff; } #remember { accent-color: #fff; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #efefef; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background: #fff; color: #000; font-weight: 600; border: none; padding: 12px 20px; cursor: pointer; border-radius: 3px; font-size: 16px; border: 2px solid transparent; transition: 0.3s ease; } button:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.15); } .register { text-align: center; margin-top: 30px; color: #fff;}